<template>
  <div>
    <vxe-toolbar>
      <template v-slot:buttons>
        <vxe-button
          status="primary"
          content="导出Excel"
          @click="exportExcel"
        ></vxe-button>
      </template>
    </vxe-toolbar>
    <div class="title">
      末尾添加行
    </div>
    <vxe-table
      border
      show-header-overflow
      show-overflow
      highlight-hover-row
      align="center"
      :merge-cells="mergeCells"
      :data="tableData"
    >
      <vxe-table-column field="name" title="名称"> </vxe-table-column>
      <vxe-table-column field="sex" title="性别"></vxe-table-column>
      <vxe-table-column field="age" title="年龄"></vxe-table-column>
      <vxe-table-column field="address" title="地址"></vxe-table-column>
    </vxe-table>
  </div>
</template>

<script>
import mixin from './mixin'

export default {
  mixins: [mixin],
  data() {
    return {
      tableData: [
        {
          name: 'Test1',
          sex: 'Man',
          age: 28,
          address: 'test abc',
        },
        {
          name: 'Test2',
          sex: 'Women',
          age: 22,
          address: 'Guangzhou',
        },
        {
          name: 'Test3',
          sex: 'Man',
          age: 32,
          address: 'Shanghai',
        },
        {
          name: 'Test4',
          sex: 'Women',
          age: 24,
          address: 'Shanghai',
        },
        {
          name: '当前时间：' + this.$moment().format('YYYY-MM-DD HH:mm:ss'),
          sex: '',
          age: '',
          address: '',
        },
      ],
      // 跨行跨列
      mergeCells: [{ row: 4, col: 0, rowspan: 0, colspan: 2 }],
      title: [],
    }
  },
}
</script>

<style scoped>
.title {
  text-align: center;
  line-height: 60px;
  background-color: #e8eaec5e;
  font-size: 20px;
  color: #606266;
  font-weight: bold;
  border-top: 1px solid #e8eaec;
  border-left: 1px solid #e8eaec;
  border-right: 1px solid #e8eaec;
}
</style>
